<template>
  <div id="brand">
    <div class="top">
      <img :src="brand.list_pic_url" alt="" width="100%" />
      <h2>{{ brand.name }}</h2>
    </div>
    <p>{{ brand.simple_desc }}</p>
  </div>
</template>

<script>
import { GetBrandDetail } from "@/request/api";

export default {
  data() {
    return {
      id: "",
      brand: "",
    };
  },

  components: {},

  created() {
    this.id = this.$route.params.id;
    // console.log(this.id);
    GetBrandDetail({ id: this.id }).then((res) => {
      // console.log(res);
      this.brand = res.data.brand;
    });
  },

  methods: {},
};
</script>
<style lang='less' scoped>

  .top {
    width: 100%;
    position: relative;
    h2 {
      text-decoration: underline;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.18rem;
      color: #fff;
    }
  }
p {
    text-align: center;
    font-size: 0.18rem;
    line-height: 0.26rem;
    padding: 0.2rem .1rem .2rem .1rem;
    background-color: #fff;
  }
</style>